<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane v-for="it in pccategory" :key="it.id" :label="it.name" :cid="it.id">
                        <el-table :data="categorylist" stripe style="width: 100%">
                            <el-table-column prop="name" label="分类名"> </el-table-column>
                            <el-table-column prop="name" label="图片">
                                <template slot-scope="scope">
                                    <img class="smallimg" :src="scope.row.imgurl" alt="" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="" label="操作">
                                <template slot-scope="scope">
                                    <el-button @click="deletecategory(scope.row)" type="text" size="small"
                                        ><i class="el-icon-delete"></i>删除</el-button
                                    >
                                    <el-button @click="modcategory(scope.row)" type="text" size="small"
                                        ><i class="el-icon-edit"></i>修改</el-button
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
        <el-dialog title="修改分类" :visible.sync="dialogFormVisible">
            <el-form :model="cform">
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                    <el-input v-model="cform.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="photo" label="商品图片" :label-width="formLabelWidth">
                    <el-upload
                        :limit="1"
                        :on-exceed="overnum"
                        v-model="form.picture"
                        name="photo"
                        :action="url"
                        ref="upload"
                        :headers="token"
                        list-type="picture-card"
                        :auto-upload="true"
                        id="xxx"
                        :on-success="filesuccess"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogmodcategory">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import url from '../../assets/js/baseurl.js';
export default {
    data() {
        return {
            form: {
                name: '',
                parent_id: 0
            },
            cform: {
                name: '',
                id:'',
                imgurl: ''
            },
            activeName: 'second',
            pccategory: [],
            url: '',
            token: {},
            categorylist: [],
            formLabelWidth: '80px',
            dialogFormVisible: false
        };
    },
    mounted: async function () {
        let res = await this.$http.get(`${url.xiaoli}/list/category`,{params:{num:100}});
        this.pccategory = res.data.data.lists;
        this.token = { token: sessionStorage.getItem('access_token') };
        this.url = url.xiaoli + '/files';
    },
    methods: {
        overnum: function () {
            this.$message.error('只能上传一张图片');
        },
        filesuccess: function (res) {
            this.cform.imgurl = JSON.stringify(res);
            // console.log(this.cform.imgurl);
        },
        dialogmodcategory: async function () {
            let res = await this.$http.put(`${url.xiaoli}/mod/category/${this.cform.id}`,this.cform)
            this.message(res);
            // console.log(res);
            this.dialogFormVisible = false;
        },
        modcategory: async function (row) {
            console.log(row);
            this.cform.id =  row.id;
            this.cform.name =row.name;
            this.dialogFormVisible = true;
        },
        deletecategory: async function (row) {
            let res = await this.$http.delete(`${url.xiaoli}/del/category/${row.id}`);
            this.message(res);
        },
        onSubmit: async function () {
            let res = await this.$http.post(`${url.xiaoli}/add/category`, this.form);
            this.message(res);
        },
        message: function (res) {
            if (res.data.code) {
                this.$message.success(res.data.msg);
            } else {
                this.$message.error(res.data.msg);
            }
        },
        async handleClick(tab) {
            let res = await this.$http.get(`${url.xiaoli}/list/category`, { params: { parent_id: tab.$attrs.cid } });
            this.categorylist = res.data.data.lists;
            for (const it of this.categorylist) {
                it.imgurl = `${url.xiaoli}/${JSON.parse(it.imgurl).photoUrl[0]}`;
            }
        }
    },
    computed: {
        getform: async function () {}
    }
};
</script>

<style scoped>
.demo-table-expand {
    font-size: 0;
}
.tag {
    margin-top: 6px;
}
.smallimg {
    width: 45px;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>